<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>幸运大转盘</title>
</head>

<body class="h-screen bg-blue-200 ">

  <div class="flex justify-around">
    <div class="w-36 h-36 bg-no-repeat relative bg-center bg-green-200 overflow-hidden" style="background-image: url('https://zwcutie.com/imgs/bg.png');">
      <div class="circle w-full h-full bg-no-repeat absolute top-0 left-0 bg-center" style="background-image: url('https://zwcutie.com/imgs/bg2.png');"></div>
      <button class="w-10:5 h-10:5 absolute top-1/2 left-1/2 -ml-20 -mt-20 bg-center bg-no-repeat" style="background-image: url('https://zwcutie.com/imgs/btn.png');">
        <span class="absolute -top-9 left-1/2 -ml-6 w-10 h-10 inline-block bg-bottom bg-no-repeat" style="background-image: url('https://zwcutie.com/imgs/point.png');" />
      </button>
    </div>
    <div class="list-warpper w-36 h-36 p-6 rounded-lg shadow-lg bg-red-200"></div>
  </div>
  <div class="h-22.56 bg-purple-200">
    <div class="rotate-22.5"></div>
    <div class="rotate-67.5"></div>
    <div class="rotate-112.5"></div>
    <div class="rotate-157.5"></div>
    <div class="rotate-202.5"></div>
    <div class="rotate-247.5"></div>
    <div class="rotate-292.5"></div>
    <div class="rotate-337.5"></div>
  </div>

  
</body>
<script type="module" src="./src/index.js"></script>

</html>